<template>
	<view>
		<view class="fwitem" v-for="(itemm,indexx) in datals" :key="itemm">
		
		
			<image class="img" :src="itemm.imageUrl" mode=""></image>
		
			<view class="jss">
				<text class="sui">{{itemm.jies}}</text>
				<text class="ls">限时立省￥{{itemm.jiesw}}</text>
			</view>
			<view class="hh">
				<text class="js">{{itemm.xsjs}}</text>
			</view>
			<view class="prc">
				<text class="price">
					￥
				</text>
				<text class="pr">
					{{itemm.pric}}
				</text>
		
			</view>
			<view class="fws">
				<view class="fw">服务总价值约 <text>￥{{itemm.yuanj}}</text></view>
				<view class="btnn">
					<u-button color="#02d1af" shape="circle" text="立即抢购"></u-button>
				</view>
			</view>
		
		
		</view>
	</view>
</template>

<script>
	export default {
		props:["datals"],
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	.fwitem {
		margin-top: 2px;
		margin-left: 3px;
		border-radius: 8px;
		width: 98%;
		height: 308px;
		background-color: #ffffff;
	
		.img {
			padding-top: 8px;
			padding-left: 18px;
			// left: 50%;
			// transform: translateX(-50%); /* 使元素水平居中 */
			border-radius: 8px;
			width: 90%;
			height: 150px;
		}
	
		.jss {
			padding: 0px 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
	
			.sui {
	
				font-size: 18px;
			}
	
			.ls {
				background-color: #fd453c;
				text-align: center;
				padding: 2px;
				border-radius: 5px;
				color: #ffffff;
				font-size: 10px;
	
			}
		}
	
		.hh {
			font-size: 10px;
			color: #07c5b3;
			padding: 5px;
		}
	
		.prc {
			color: #ff6223;
			padding-left: 5px;
	
			.price {
				font-size: 12px;
				font-weight: bold;
			}
	
			.pr {
				font-size: 20px;
			}
		}
	
		.fws {
			display: flex;
			justify-content: space-between;
			padding: 0px 8px;
			align-items: center;
	
			.fw {
				// background-color: #fee1d2;
				color: #7b704f;
	
				text {
					font-size: 11px;
					color: #ff6223;
				}
			}
	
			.btnn {}
		}
	
	}

</style>
